@charset "utf-8";
@import "reset";
@import "common";

.web {
  position: relative;
  // 先加上使用到
  width: 100%;
  height: 100%;
  overflow: hidden;

  header {
    width: vw(706px);
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: vw(16px) 0 vw(10px);
    .logo_box {
      width: vw(124px);
      height: vw(124px);
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .search_box {
      position: relative;
      height: 100%;
      height: 100%;
      width: vw(268px);
      height: vw(54px);
      box-sizing: border-box;
      //    保证盒子还是设定的宽高,不会让边距往里面压
      border-color: $index_color;
      border: 2px solid $index_color;
      border-radius: vw(27px);
      form {
          width: 100%;
          height:100%;
          display: flex;
          box-sizing: border-box;
          justify-content: space-around;
          align-items: center;
          padding-left:vw(20px) ;
        input {

            width: vw(180px);
            height: vw(40px);
            font-size: vw(24px);
            color: #777777;
            border: none;
            outline: none;
          //    width: vw(268px);
          //    height: vw(54px);
          //    box-sizing: border-box;
          //    保证盒子还是设定的宽高,不会让边距往里面压
          //    border-color: $index_color;
          //    border: 2px solid $index_color;
          //   border-radius:vw(27px) ;
        }
        button {
            // width: vw(30px);
            // height: vw(30px);
            color: $index_color;
            background-color: transparent;
            border: none;

        }
      }
    }
    .city_box{
        position: relative;
        width: vw(164px);
        height: vw(60px);
        border: 2px solid $index_color;
        box-sizing: border-box;
        padding-left:vw(14px) ;
        select{
            width: 100%;
            height: 100%;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            // 兼容性问题 去掉标签自带样式
        }
        &::after{
            content: "";
            // 伪对象属性一定要右content
            position: absolute;
            top: 10px;
            left: 50px;
            width:0;
            height:0;
            border-width:8px 8px 8px 8px;
            border-style:solid;
            border-color:$index_color transparent transparent ;
           
        }

    }
  }













  section{
      .kv{
          img{
              width: 100%;
          }
      }
      .more{
          position: relative;
          .right{
            padding-top: vw(20px);
            padding-left: vw(20px);
            i{
                color: $index_color;
            }
            span{
                font-size:vw(30px) ;
                vertical-align: super;
            }
          }
          display: flex;
          justify-content: space-between;
          .left{
              padding-top: vw(50px);
              display: inline-block;
              span{
                  font-size: vw(24px);
                  vertical-align: super;
                  line-height: vw(24px);
              }
          .box{
              
            //   margin-top: vw(50px);
            margin-right:vw(22px) ;
              display: inline-block;
              width: vw(28px);
              height: vw(28px);
              border-radius: vw(25px);
              box-sizing: border-box;
              border: 1px solid $index_color;
              i{
                font-size: vw(25px);
                vertical-align: super;
                color: $index_color;
            }
          }
        }

      }


      .type{
          margin-left:vw(77px);
          margin-right:vw(77px);
          height: vw(220px);
          display: flex;
          flex-wrap: wrap;
        //   justify-content: space-around;
         
          .row{
            display: flex;
            // justify-content: space-between;
            flex-basis: 100%;
            justify-content: space-between;
            align-items: center; 
              img{
                  
                  width: vw(240px);
                
              }

          }
      }



      .information{
        //   display: flex;

          .first{
            display: flex;
            justify-content: space-around;
              
              .left{
                display: inline-block;
                  img{
                      height: vw(163px);
                  }
                  
              }
              .center{
                  display: inline-block;
                  width: vw(355px);
                  p:nth-of-type(1){
                      font-size: vw(30px);
                      line-height: vw(60px);
                  }
                  p:nth-of-type(2){
                      font-size: vw(22px);
                      color: #494949;
                  }
                  p:nth-of-type(3){
                      font-size: vw(32px);
                      color: $index_color;
                      line-height: vw(70px);
                  }

              }
              .right{
                display: inline-block;
                p:nth-of-type(1){
                    font-size: vw(22px);
                    line-height: vw(60px);
                    color: #494949;
                }
                p:nth-of-type(2){
                    font-size: vw(22px);
                    margin-top:vw(45px) ;
                    color: #494949;
                }

              }
          }
      }














  }

  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #bbb9ba;
    width: 100%;
    background-color: #fff;
    height: vw(120px);
    .left_right{
        margin-left: vw(50px);
        margin-right:vw(50px) ;
    ul {
      

        padding: r(15px) 0 r(12px);
        li {

            width: 25%;
            text-align: center;
            position: relative;
            a {
                color: #8b8b8b;
                display: inline-block;
                width: 100%;
                height: 100%;
                i {
                    font-size: r(38px);
                    color: $index_color;
                }
                p {
                    font-size: r(18px);
                }
                &.active {
                    // color: $index_color;
                    
                }
            }
        }
    }

}

}


 





  .search_web {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 1;
    background-color: #f1f1f1;
    transition: left 0.3s;
    .web_2{
        // overflow-y: hidden;
        height: 100%;
        overflow:scroll; 
    
        .nav{
            margin: vw(50px) vw(25px) vw(20px) vw(25px);
            width: vw(705px);
            height: vw(60px);
            display: flex;
            justify-content: space-between;
            .back{
                display: inline-block;
                width: vw(125px);
                height: vw(60px);
                border-radius: vw(30px);
                
                box-sizing: border-box;
                border: 1px solid $index_color;
                text-align: center;
                span{
                    font-size: vw(30px);
                }
              
            }
            span{
                line-height: vw(60px);
            }
            i{
                font-size: vw(55px);
                color: $index_color;
                
            }
        }
    
    
        section{
            // overflow-y: hidden;
            
            .kv{
                img{
                    width: vw(750px);
                }
    
                
            }
            .buy{
                width: vw(664px);
                margin-left:vw(23px) ;
                margin-bottom:vw(30px) ;
                display: flex;
                justify-content: space-between;
    
           
            span{
                font-size: vw(72px);
                color: $index_color;
                vertical-align: middle;
                
            }
            .buy_bottom{
                margin-top: vw(30px);
                display: inline-block;
                background-color:$index_color ;
                width: vw(110px);
                height: vw(60px);
                border-radius:vw(20px) ;
                text-align: center;
                line-height: vw(64px);
                span{
                    // line-height: vw(32px);
                    vertical-align:top;
                    font-size: vw(32px);
                    color:white;
                   
                }
            }
    
        }
        .comment{
            padding-left: vw(35px);
            padding-right: vw(40px);
            display: flex;
            justify-content: space-between;
            .left{
                margin-bottom:vw(20px) ;
                display: inline-block;
                i{
                    color: $index_color;
                    font-size: vw(40px);
                }
                span{
                    font-size: vw(30px);
                }
                span:nth-of-type(2){
                    color: $index_color;
                }
            }
            .right{
                display: inline-block;
                span{
                    font-size: vw(26px);
                    vertical-align: text-bottom;
                }
            }
        }
    
    
        .business{
            background-color:$index_color ;
            width: vw(665px);
            height: vw(65px);
            display: flex;
            justify-content: space-between;
            margin-left: vw(45px);
    
    
    
            span{
                font-size: vw(35px);
                color: white;
                line-height: vw(70px);
                padding-left: vw(10px);
            }
            i{
                font-size: vw(35px); 
                color: white;
                line-height: vw(70px);
            }
        }
        .template_box{
            display: flex;
            justify-content: space-between;
            padding-left: vw(40px);
            padding-right: vw(40px);
            padding-top:vw(20px) ;
            .images{
                display: inline-block;
                img{
                    width: vw(175px);
                    height: vw(175px);
        
                }
        
            }
            .center{
                width: vw(340px);
                display: inline-block;
                p{
                    font-size: vw(30px);
    
                }
                i{
                    font-size: vw(30px);
                    color: $index_color;
    
                }
                span{
                    font-size: vw(26px);
                }
                a{
                   
                    color: $index_color;
                    font-size: vw(22px);
    
                }
                p:nth-of-type(2){
                    font-size: vw(22px);
                    margin-top:vw(5px) ;
                    margin-bottom:vw(8px) ;
                    color: gray;
                }
            }
            .buttom{
                margin-top:vw(40px) ;
                display: inline-block;
                width: vw(110px);
                height: vw(60px);
                background-color: $index_color;
                border-radius: vw(20px);
                text-align: center;
    
                
                span{
                    font-size: vw(30px);
                    color: white;
                    line-height:vw(60px) ;
                    
                }
                
            }
    
        }
        
    
    
    
    
        }
    
    
    }
    
  }
  #search_web_control {
    display: none;
    &:checked + .search_web {
      left: 0%;
    }
  }
}
























